import React,{Component} from 'react';
import {Platform, StyleSheet,ScrollView,Text, View,TouchableOpacity, Alert,Image } from 'react-native';

export default class attendance extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
	render(){
		const { navigation } = this.props;
		return(
		    <ScrollView style={styles.ScrollView}>
		        <View style={styles.container}>
		       		<Text style={styles.titles}>第三步:选择支付方式</Text>
		        	<TouchableOpacity style={styles.List}>
			       		<View style={styles.ListLeft}>
			        		<Image style={styles.ListLeftImg} source={require('../img/university/wecht.png')}></Image>
			        	</View>
			        	<View style={styles.ListTitle}>
			        		<Text style={styles.ListTitleText}>微信支付</Text>
			        	</View>
			        	<View style={styles.ListRight}>
			        		<Image style={styles.ListRightImg} resizeMode={'contain'}  source={require('../img/university/minSuccess.png')}></Image>
			        	</View>
			        </TouchableOpacity>
			        <TouchableOpacity style={styles.List}>
			       		<View style={styles.ListLeft}>
			        		<Image style={styles.ListLeftImg} source={require('../img/university/zhifubao.png')}></Image>
			        	</View>
			        	<View style={styles.ListTitle}>
			        		<Text style={styles.ListTitleText}>支付宝支付</Text>
			        	</View>
			        	<View style={styles.ListRight}>
			        		
			        	</View>
			        </TouchableOpacity>
		        </View>
		        <View style={{padding:10,marginTop:20,}}>
			        <TouchableOpacity style={{height:40}}
			        	onPress={()=>{ 
							navigation.navigate("successfulPayment")
						}}
			        >
			      		<Text style={styles.btn}>下一步</Text>
			    	</TouchableOpacity>
		    	</View>
         	</ScrollView>
		);
	}
}
const styles = StyleSheet.create({
	List:{
		flexDirection:'row',height:55,borderBottomWidth:1,borderBottomColor: "#D4D4D4",
	},
	ListLeft:{
		flex:1,padding:8,
	},
	ListLeftImg:{
		height:35,width:35,alignSelf:'center',
	},
	ListTitle:{
		flex:5,
	},
	ListTitleText:{
		fontSize: 17,lineHeight: 50 ,fontWeight:'bold',
	},
	ListRight:{
		paddingTop:13,flex:1,
	},
	ListRightImg:{
		alignSelf:'center',height:"60%",width:"60%",
	},
	titles:{
		height: 45,borderBottomWidth:1,borderBottomColor: "#D4D4D4",
		textAlign: 'center',fontSize: 18,lineHeight: 45 ,
	},
	btn:{
	  	width:"100%",backgroundColor:'#D04542',borderRadius:2,
	  	lineHeight: 40 ,color: 'white',textAlign: 'center',
	},
	
	ScrollView:{
		backgroundColor:"#F2F2F2",
	},
	container:{
		height: 200,margin:10,backgroundColor: "#F2F2F2",
	},
	data:{
		fontSize: 16,color:'#9B9B9B',
	},
});
